<template>
  <div class="zh-transaction-record">
    <nav-header></nav-header>

    <div class="zh-table">
      <div class="zh-table-open clear">
        <div class="zh-open-left fl">
          <div class="open-width" style="width: 130px" v-if="user_level === 0">
            <el-select v-model="schoolId" filterable placeholder="请选择状态">
              <el-option v-for="item in schoolList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="open-width" style="width: 145px">
            <el-cascader placeholder="请选择班级" :options="gradeList" :props="claddDataProps"
              @active-item-change="changeAddItem" v-model="gradeId">
            </el-cascader>
          </div>
          <div class="open-width">
            <el-input v-model="keyword" placeholder="账号、姓名、学号" @keyup.enter.native="searchList"></el-input>
          </div>
          <el-button type="primary" @click="searchList">搜索</el-button>
          <el-button type="primary" @click="resetList">重置</el-button>
        </div>

        <div class="zh-open-right fr">
          <el-button type="primary" @click="exportSelect">导出所选</el-button>
          <el-button type="danger" @click="deleteSelete">批量删除</el-button>
        </div>
      </div>

      <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
        <el-table border :data="recordList" max-height="600" @selection-change="tableSelectionChange" style="width: 100%">
          <el-table-column type="selection" width="50" align="center" fixed>
          </el-table-column>
          <el-table-column prop="" label="学校" align="center" v-if="user_multistage" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="number" label="账号" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="true_name" label="真实姓名" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="now_class_name" label="班级" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="" label="性别" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.student_sex === '1' ? '男' : '女' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="student_code" label="学号" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="teacher_name" label="班主任" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="parent_name" label="家长" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="call_num" label="联系方式" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="create_time" label="最近操作" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="create_time" label="生效日期" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="student_study_status" label="异动类型" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="" label="操作" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="linkTo(scope.row)" type="text">记录</el-button>
              <el-button @click="deleteRow(scope.row.id)" type="text" class="delete-button">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="table-pagination" v-show="total_number > 10">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="recordParams.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="recordParams.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_number">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: {
        status: false,
        txt: '获取数据...',
      },
      schoolId: null,
      schoolList: [],
      claddDataProps: {
        value: 'id',
        label: 'name',
      },
      gradeId: [],
      stateId: null,
      keyword: '',
      gradeList: [],
      stateList: [],
      selected: [],
      recordParams: {
        type: 1,
        app_code: JSON.parse(sessionStorage.getItem('user_info_str')).app_code,
        update_type: 3,
        org_id: null,
        keyword: '',
        page_index: 1,
        page_size: 10
      },
      total_number: 0,
      recordList: [],
      rowLen: 0,
      user_multistage: JSON.parse(sessionStorage.getItem('user_multistage')), // 判断当前是否为多级版本
      user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
    }
  },
  created() {
    this.getList();
    this.getAllGrade();
  },
  methods: {
    /**
     * 动态加载班级次级选项
     * @param {Array} val 选中值的 id
     */
    changeAddItem(val) {
      if (val.length > 1) return;

      let success = (res => {
        this.gradeList.forEach(item => {
          if (item.id === val[0]) {
            item.children = [];

            res.data.forEach(tem => {
              item.children.push({
                id: tem.id,
                name: tem.name
              })
            })
          }
        })
      });

      let params = {
        grade_id: val[0],
        // get_end_class: 1
      }

      this.$ajax.get('api/org/get_class_by_grade_code', { params, func: { success: success } })
    },
    /**
     * 获取全部年级
     */
    getAllGrade() {
      let success = (res => {
        this.gradeList = [];

        if (!is_empty(res.data)) {
          res.data.forEach(item => {
            this.gradeList.push({
              id: item.id,
              name: item.name,
              children: []
            })
          })

          this.$forceUpdate();//强制渲染
        }
      });

      this.$ajax.get('api/org/all_grade', { params: {}, func: { success: success } });
    },
    /**
     * 跳到变更记录页面
     * @param {Number} obj 记录
     */
    linkTo(obj) {
      this.$router.push("/user/studystatus/transaction-log/" + obj.student_id);
    },
    /**
     * 导出选中的记录
     */
    exportSelect() {
      if (this.recordList.length === 0 || this.selected.length === 0) {
        this.$message.warning("导出的数据为空！")
        return false;
      }

      let _id = [];
      this.selected.forEach(item => {
        _id.push(item.id);
      })

      let params = {
        id: _id,
        update_type: 3,
        keyword: this.keyword ? this.keyword : null,
        org_id: this.gradeId.length > 0 ? this.gradeId[this.gradeId.length - 1] : null,
        app_code: this.recordParams.app_code ? this.recordParams.app_code : null
      }

      this.export_excel('api/studystatus/download_studystatus_history_list', params, '异动记录');
    },
    /**
     * 根据筛选条件搜索
     */
    searchList() {
      this.recordParams.page_index = 1;
      this.recordParams.keyword = this.keyword;
      this.recordParams.org_id = this.gradeId[this.gradeId.length - 1];

      this.getList();
    },
    /**
     * 重置筛选条件
     */
    resetList() {
      this.keyword = '';
      this.gradeId = [];
      this.recordParams.org_id = null;
      this.recordParams.keyword = null;
      this.recordParams.page_index = 1;
      this.recordParams.page_size = 10;

      this.getList();
    },
    /**
     * 获取异动记录
     */
    getList() {
      this.loading.status = true;

      let success = (res => {
        this.loading.status = false
        this.recordList = res.data.data;
        this.total_number = res.data.data_sum;
      });

      this.$ajax.get('api/studystatus/get_studystatus_history_list', { params: this.recordParams, func: { success: success } })
    },
    /**
     * 选中记录
     * @param {Array} val 选中的id
     */
    tableSelectionChange(val) {
      this.selected = val;
    },
    /**
     * 删除记录
     * @param {Number} id 记录id
     */
    deleteRow(obj) {
      let yes = (res => {
        this.rowLen = 1;
      })
      let cancel = (res => { })

      this.e_confirm({ yes: yes, cancel: cancel, txt: '是否删除该条记录？' });
    },
    /**
     * 批量删除
     */
    deleteSelete() {
      if (this.selected.length === 0) {
        this.$message.warning("请选择要删除的项");
        return false;
      }

      let yes = (res => {
        this.rowLen = this.selected.length;
      })
      let cancel = (res => { })

      this.e_confirm({ yes: yes, cancel: cancel, txt: '确定要批量删除选中的项吗？' });
    },
    handleSizeChange(val) {
      this.recordParams.page_index = 1;
      this.recordParams.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.recordParams.page_index = val;
      this.getList();
    },
  },
}
</script>
<style lang="scss">
.zh-transaction-record {}
</style>
